<script setup lang="ts">
import dayjs from 'dayjs'
import { onMounted, ref } from 'vue'
import { getCollectedListApi } from '@/api/pay'
import type { CollectedItemDto, CollectedListDto } from '@/api/pay/type'
import user from '@/composables/user'

const tabflag = ref<number>(0)
const data = ref('')
const endData = ref()
const wagesList = ref<CollectedListDto>({})

function bindDateChange(e: any) {
    console.log('change', e)
    data.value = dayjs(e.detail.value).format('YYYY-MM')
    getCollectedList(data.value, tabflag.value === 0 ? '' : tabflag.value === 1 ? 2 : 1)
}
async function getCollectedList(date = '', type: string | number = '') {
    const result = await getCollectedListApi({
        month: date,
        salaryComeForm: type,
    })
    wagesList.value = result
}
function changetab(i: number) {
    tabflag.value = i
    getCollectedList('', tabflag.value === 0 ? '' : tabflag.value === 1 ? 2 : 1)
}

function onToDetail(i: CollectedItemDto) {
    console.log(i, 'gusdhfyguyh')

    if (i.salaryComeForm === 0) {
        uni.navigateTo({
            url: `/package-mine/pages/salary-list-details/salary-list-details?id=${i.id}&viewType=view`,
        })
    }
    else {
        uni.navigateTo({
            url: `/package-mine/pages/advance-details/advance-details?id=${i.applyId}&viewType=view`,
        })
    }
}

onMounted(() => {
    data.value = dayjs().format('YYYY-MM')
    endData.value = dayjs().format('YYYY-MM')
    // data.value = '2023-11'
    if (user.isLogin.value)
        getCollectedList(data.value, '')
})
</script>

<template>
    <NavbarContainer nav-title="领薪明细">
        <div>
            <div class="tabbar">
                <div class="tabitem" :class="{ active: tabflag === 0 }" @click="changetab(0)">全部</div>
                <div class="tabitem" :class="{ active: tabflag === 1 }" @click="changetab(1)">发薪</div>
                <div class="tabitem" :class="{ active: tabflag === 2 }" @click="changetab(2)">预支</div>
            </div>
            <div v-if="Object.keys(wagesList).length === 0" class="nodata">暂无数据</div>
            <div v-for="(item, i) in wagesList" v-else :key="i">
                <div class="wages-title">
                    <picker mode="date" :value="i" fields="month" start="2020-01-01" :end="endData"
                            @change="bindDateChange">
                        <div class="bold">
                            {{ i }}
                            <div class="triangle" />
                        </div>
                    </picker>
                    <div>
                        本月收入:￥{{ item.totalMoney }}
                    </div>
                </div>
                <div class="wages-list">
                    <div v-for="(j, k) in item.list" :key="k" class="wages-i" @click="onToDetail(j)">
                        <div class="wages-list-left">
                            <div class="wages-list-left-title">
                                <div class="title">
                                    <div v-if="j.salaryComeForm === 1" class="bacimgblue">
                                        <image src="../../../static/images/blue.png" mode="widthFix" />
                                        <div class="tagtext">预支</div>
                                    </div>
                                    <div v-if="j.salaryComeForm === 0" class="bacimggreen">
                                        <image src="../../../static/images/green.png" mode="widthFix" />
                                        <div class="tagtext">发薪</div>
                                    </div>
                                    {{ j.serveCompanyName }}
                                </div>
                                <div v-if="j.salaryComeForm === 0" class="withdrawal">
                                    工作时间：<text class="withdrawal-time">
                                        {{
                                            j.workDate }}
                                    </text>
                                </div>
                                <div v-if="j.salaryComeForm === 0" class="withdrawal">
                                    发薪日期：<text class="withdrawal-time">
                                        {{
                                            j.payTime }}
                                    </text>
                                </div>
                                <div v-if="j.salaryComeForm === 0" class="withdrawal">
                                    领薪时间：<text class="withdrawal-time">
                                        {{
                                            j.updateTime }}
                                    </text>
                                </div>
                                <div v-if="j.salaryComeForm === 0" class="withdrawal">
                                    发薪备注：<text class="withdrawal-time">
                                        {{
                                            j.detailRemarks }}
                                    </text>
                                </div>
                                <div v-if="j.salaryComeForm === 1" class="withdrawal">
                                    申请日期：<text class="withdrawal-time">
                                        {{
                                            j.advanceApplyTime }}
                                    </text>
                                </div>
                                <div v-if="j.salaryComeForm === 1" class="withdrawal">
                                    预支日期：<text class="withdrawal-time">
                                        {{
                                            j.payTime }}
                                    </text>
                                </div>
                                <div v-if="j.salaryComeForm === 1" class="withdrawal">
                                    领薪时间：<text class="withdrawal-time">
                                        {{
                                            j.getSalaryTime }}
                                    </text>
                                </div>
                            </div>
                        </div>
                        <div class="wages-list-right">
                            ¥ {{ j.paymentAmount }}
                        </div>
                    </div>
                    <div v-if="item.list.length === 0" class="nodata">暂无数据</div>
                </div>
            </div>
        </div>
    </navbarcontainer>
</template>

<style scoped>
.triangle {
    width: 0;
    height: 0;
    border: 10rpx solid;
    border-color: black transparent transparent transparent;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    top: 3rpx;
}

.bold {
    font-weight: 700;
}

.nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 350rpx;
}

.details {
    width: 189rpx;
    background: #73A2FF;
    border-radius: 30px;
    margin-top: 30rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.bacimgblue {
    margin-right: 8rpx;
    position: relative;
    width: 72rpx;
    height: 40rpx;
}

.bacimggreen {
    position: relative;
    width: 72rpx;
    height: 40rpx;
    margin-right: 8rpx;
}

.bacimggreen image {
    position: absolute;
    top: 0;
    left: 0;
    width: 72rpx;
    height: 40rpx;
}

.bacimgblue image {
    position: absolute;
    top: 0;
    left: 0;
    width: 72rpx;
    height: 40rpx;
}

.tagtext {
    text-align: center;
    z-index: 999;
    color: #FFFFFF;
    font-size: 20rpx;
    position: absolute;
    top: 0;
    left: 0;
    width: 72rpx;
    height: 43rpx;
    padding-bottom: 10rpx;
    padding-top: 6.5rpx;
}

.details-div {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 5rpx;
}

.app-go-icon {
    width: 38rpx;
    height: 38rpx;
    top: 94rpx;
    left: 36rpx;
}

/* 待领工资 */
.wages {
    width: 100vw;
    position: absolute;
    z-index: 3;
    top: 240rpx;
}

.wages-receive {
    width: 690rpx;
    margin: 40rpx 0 0 30rpx;

}

.wages-list {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.wages-i {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.wages-list-left {
    display: flex;
}

.wages-list-left-img {
    width: 72rpx;
    height: 40rpx;
}

.wages-list image {
    width: 72rpx;
    height: 40rpx;
}

.wages-list-left-title {
    float: left;
    margin-left: 20rpx;
}

.title {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: 600;
    margin-left: -50rpx;
    color: #202536;
}

.withdrawal {
    font-size: 24rpx;
    font-weight: 400;
    color: #9497B1;
    margin-top: 10rpx;
}

.withdrawal-time {
    font-size: 24rpx;
    font-weight: 500;
    color: #202536;
}

.wages-list-right {
    flex: none;
    font-size: 32rpx;
    font-weight: 500;
    color: #FF7642;
    margin-right: 35rpx;
}

.wages-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
}

.wages-date {
    font-size: 46rpx;
    font-weight: 900;
    color: #202536;
}

.tabbar {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.tabitem {
    min-width: 20rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid transparent;
}

.active {
    padding-bottom: 8rpx;
    font-size: 36rpx;
    font-weight: 700 !important;
    border-bottom: 2px solid #00D679;
}
</style>

<route lang="json">
{
    "layout": "default",
    "style": {
        "navigationBarTitleText": "领薪明细"
    }
}
</route>
